<template>
  <div class="app_content_container">
    <Breadcrumb :items="[{ label: '插件管理', path: '/plugin-mgmt' }, name]" />
    <div class="content_info">
      <BorderBox title="基本信息">
        <template #title_r>
          <!-- <ga-button type="primary" @click="$refs.addOrEditRef.open()"> 编辑 </ga-button> -->
          <ga-button
            type="primary"
            v-if="id === 'bk'"
            :loading="loading"
            @click="handleSync"
          >
            同步
          </ga-button>
        </template>
        <template #main_info>
          <ga-descriptions
            size="large"
            :column="3"
            :align="{ label: 'right' }"
            :label-style="{ width: '70px' }"
            :value-style="{ minWidth: '180px' }"
          >
            <ga-descriptions-item label="插件名称">
              {{ info?.name || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="插件标识">
              {{ info?.name || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="创建人">
              {{ info?.createBy || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="创建时间">
              {{ info?.createTime || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="更新人">
              {{ info?.createBy || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="更新时间">
              {{ info?.createTime || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="开启状态">
              <TagStatus :type="info?.enabled" />
            </ga-descriptions-item>
            <ga-descriptions-item label="描述">
              {{ info?.remark || "-" }}
            </ga-descriptions-item>
          </ga-descriptions>
        </template>
      </BorderBox>
      <BorderBox title="云区域" v-if="id === 'bk'" :wrapperStyle="{ margin: '16px 0' }">
        <template #main_info>
          <BaseTable
            :apiUrl="getBkCloudList"
            isPadding0
            ref="baseTableRef"
            :columns="cloudColumns"
            height="calc(100vh - 400px)"
            :isShowAddBtn="false"
            :isShowLeft="false"
          >
            <template #ID="{ record }">
              <ga-link @click="$refs.addOrEditRef.open(record)">
                {{ record?.bkCloudId || "-" }}
              </ga-link>
            </template>
          </BaseTable>
        </template>
      </BorderBox>
      <BorderBox title="业务" v-if="id === 'bk'">
        <template #main_info>
          <BaseTable
            :apiUrl="getBkBizList"
            isPadding0
            ref="baseTableRef"
            :columns="busizColumns"
            height="calc(100vh - 400px)"
            :isShowAddBtn="false"
            :isShowLeft="false"
          >
            <template #ID="{ record }">
              <ga-link @click="$refs.addOrEditRef.open(record)">{{
                record?.bkBizId || "-"
              }}</ga-link>
            </template>
          </BaseTable>
        </template>
      </BorderBox>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { busizColumns, cloudColumns } from "../columns";
import { getPluginDetail, getBkBizList, getBkCloudList, syncBk } from "@/api/pluginMgmt";

const route = useRoute();
const { id } = route.params;
const { name } = route.query;
const info = ref(null);
import useLoading from "@/hooks/loading";
import { Message } from "@garco-design/web-vue";
const { loading, setLoading } = useLoading(false);

// 同步
const handleSync = async () => {
  setLoading(true);
  try {
    const { code } = await syncBk();
    if (code === 20000) Message.success("同步成功");
  } finally {
    setLoading(false);
  }
};
const fetchPluginDetail = async () => {
  try {
    const { code, data } = await getPluginDetail(id);
    if (code === 20000) info.value = data;
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  fetchPluginDetail();
});
</script>

<style lang="scss" scoped>
.content_info {
  height: calc(100vh - 132px);
}
</style>
